:root {
    /* 主要颜色 */
    --main-color: #0052d9;
    /* 背景灰色 */
    --grey-bg-color: rgb(245, 245, 245);
    /* 白色 */
    --white-color: rgb(255, 255, 255);
    /* 黑色 */
    --black-color: rgb( 0, 0, 0);
    /* 间距 */
    --element-col: 30px;
    /* 黄金比例 */
    --golden-ratio: 0.618;
    /* 导航栏高度 */
    --header-bar-height: 72px;
}


/* 初始化 Page Init */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--grey-bg-color);
    color: #fff;
    line-height: 1.5;
    font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
    -webkit-font-smoothing: antialiased;
}


/* 元素初始样式 ELEMENT STYLE 开始 */

a {
    text-decoration: none;
}

img,
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

li,
* li {
    list-style: none;
}

p {
    font-size: 18px;
}


/* ELEMENT 元素边框线 */

.ber-all {
    border: 1px solid rgb(111, 27, 247);
}

.ber-bot {
    border-bottom: 1px solid rebeccapurple;
}

.ber-rgt {
    border-right: 1px solid rebeccapurple;
}

.ber-lft {
    border-left: 1px solid rebeccapurple;
}


/* ELEMENT 外边距 */

.mar-all {
    margin: var(--element-col);
}

.mar-rgt {
    margin-right: var(--element-col);
}

.mar-lft {
    margin-left: var(--element-col);
}

.mar-top {
    margin-top: var(--element-col);
}

.mar-bot {
    margin-bottom: var(--element-col);
}


/* ELEMENT 内边距 */

.pad-all {
    padding: var(--element-col);
}

.pad-top {
    padding-top: var(--element-col);
}

.pad-bot {
    padding-bottom: var(--element-col);
}

.pad-lft {
    padding-left: var(--element-col);
}

.pad-rgt {
    padding-right: var(--element-col);
}


/* ELEMENT 布局 Flex | Grid */

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.jus-start {
    justify-content: start;
}

.jus-center {
    justify-content: center;
}

.jus-space-bet {
    justify-content: space-between;
}

.jus-end {
    justify-content: end;
}

.ali-start {
    align-items: flex-start;
}

.ali-center {
    align-items: center;
}

.ali-end {
    align-items: flex-end;
}

.ac-space-bet {
    align-content: space-between;
}

.flex-warp {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.flex-column {
    flex-direction: column;
}


/* ELEMENT 文字样式属性 */

.ft-center {
    text-align: center;
}

.ft-rgt {
    text-align: right;
}

.ft-lic {
    font-style: italic;
}

.ft-bold {
    font-weight: bold;
}


/* ELEMENT 定位 */

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.absolute {
    position: absolute;
}


/* ELEMENT 定义复用颜色 */

.bg-main {
    background-color: var(--main-color);
}

.bg-black {
    background-color: var(--black-color);
}

.bg-write {
    background-color: var(--white-color);
}

.bg-transparent {
    background-color: rgba(0, 0, 0, 0);
}

.clr-black {
    color: var(--black-color);
}

.clr-write {
    color: var(--white-color);
}

.clr-main {
    color: var(--main-color);
}


/* ElEMENT 定义复用宽度 | 高度 */

.menu-bar {
    height: var(--header-bar-height);
}

.constraint {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
}

.w_100 {
    width: 100%;
}


/* ELEMENT 复用伪类样式 */

._item-li:hover {
    cursor: pointer;
}


/* ELEMENT 显示隐藏 | 元素溢出 */

.dis-block {
    display: block;
}

.of_hidden {
    overflow: hidden;
}

.of_y {
    overflow-x: hidden;
    overflow-y: scroll;
}

.of_x {
    overflow-x: scroll;
    overflow-y: hidden;
}


/* ELEMENT 层级 */

.z-999 {
    z-index: 999;
}

.z-10 {
    z-index: 10;
}

.z-9 {
    z-index: 9;
}

.z-6 {
    z-index: 6;
}

.z-1 {
    z-index: 1;
}


/* 超出文字隐藏 */

.text-ellipsis,
.text-ellipsis-2,
.text-ellipsis-3,
.text-ellipsis-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.text-ellipsis {
    -webkit-line-clamp: 1;
}

.text-ellipsis-2 {
    -webkit-line-clamp: 2;
}

.text-ellipsis-3 {
    -webkit-line-clamp: 3;
}

.text-ellipsis-4 {
    -webkit-line-clamp: 4;
}